<template>
<view class="normal-login-container">
 
   <view class="logo-content flex">
     <image class="logo" style="width: 80rpx; height: 80rpx;" :src="globalConfig.appInfo.logo" ></image>
     <text class="title">云闪付移动端登录</text>
   </view>

	<view style="margin-top: 40px;"></view>
	<view style="margin: 20px;">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u-form
					 labelPosition="left"
					    :model="loginForm"
					    :rules="rules"
					    ref="uForm"
			>
				<u-form-item
						 label="账号"
						        prop="username"
						        borderBottom
						        ref="item1"
				>
					<u--input
							 v-model="loginForm.username"
							            border="none"
							            placeholder="请输入账号"
					></u--input>
				</u-form-item>
				<u-form-item
				        label="密码"
				        prop="password"
				        borderBottom
				        ref="item2"
				>
					<u--input
					            v-model="loginForm.password"
					            border="none"
					            placeholder="请输入密码"
					></u--input>
				</u-form-item>
				<u-button style="margin-top: 35px;"  @click="submit" type="primary">登录</u-button>
		
			
			</u-form>
			
		</view>
		
  </view> 

</template>

<script>
  import { getCodeImg } from '@/api/login'
import { getToken,setToken,TokenKey } from '@/utils/auth'
  export default {
    data() {
      return {
		  schoolData: [
		          { name: '浙江大学' },
		          { name: '浙江大学' },
		          { name: '浙江大学' },
		          { name: '清华大学' }
		        ],
		  showSex: false,
		  			model1: {
		  				userInfo: {
		  					name: 'uView UI',
		  					sex: '',
		  				},
		  			},
		  			
		  			rules: {
		  			  username: {
		  			    required: true,
		  			    message: '账号不符合规则',
						// pattern: /^1[3-9]\d{9}$/, // 如果是手机号
		  			    trigger: ['blur']
		  			  },
		  			  password: {
		  			    required: true,
		  			    min: 6,  // 最少6位
		  			    message: '最低六位',
		  			    trigger: ['blur']
		  			  }
		  			},

		  			radio: '',
		  			switchVal: false,
        codeUrl: "",
        captchaEnabled: false,
        // 用户注册开关
        register: true,
        globalConfig: getApp().globalData.config,
        loginForm: {
          username: "admin",
          password: "admin123",
          code: "",
          uuid: ''
        }
      }
    },
    created() {
      this.getCode()
    },
    methods: {
		submit() {
					this.$refs.uForm.validate().then(res => {
						uni.$u.toast('校验通过')
						this.handleLogin()
						
					}).catch(errors => {
						uni.$u.toast('校验失败')
					})
				},
      // 用户注册
      handleUserRegister() {
        this.$tab.redirectTo(`/pages/register`)
      },
      // 隐私协议
      handlePrivacy() {
        let site = this.globalConfig.appInfo.agreements[0]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 用户协议
      handleUserAgrement() {
        let site = this.globalConfig.appInfo.agreements[1]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 获取图形验证码
      getCode() {
        getCodeImg().then(res => {
			
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
		
          if (this.captchaEnabled) {
            this.codeUrl = 'data:image/gif;base64,' + res.img
            this.loginForm.uuid = res.uuid
          }
        })
      },
      // 登录方法
      async handleLogin() {
        if (this.loginForm.username === "") {
          this.$modal.msgError("请输入您的账号")
        } else if (this.loginForm.password === "") {
          this.$modal.msgError("请输入您的密码")
        } else if (this.loginForm.code === "" && this.captchaEnabled) {
          this.$modal.msgError("请输入验证码")
        } else {
          this.$modal.loading("登录中，请耐心等待...")
          this.pwdLogin()
        }
      },
      // 密码登录
      async pwdLogin() {
        this.$store.dispatch('Login', this.loginForm).then(() => {
          this.$modal.closeLoading()
          this.loginSuccess()
        }).catch(() => {
          if (this.captchaEnabled) {
            this.getCode()
          }
        })
      },
      // 登录成功后，处理函数
      loginSuccess(result) {
		 
        // 设置用户信息
        this.$store.dispatch('GetInfo').then(res => {
		  // setToken(resu)
          this.$tab.reLaunch('/pages/index')
        })
      }
    }
  }
</script>

<style lang="scss">
	
  page {
    background-color: #ffffff;
  }
.logo-content {
  display: flex;
  align-items: center;       /* 垂直居中 */
  justify-content: center;   /* 水平居中 */
}

.logo {
  width: 80rpx;
  height: 80rpx;
}

.title {
  margin-left: 10rpx; /* 添加间距 */
  font-size: 32rpx;
}
  .normal-login-container {
    width: 100%;

    .logo-content {
      width: 100%;
      font-size: 21px;
      text-align: center;
      padding-top: 15%;

      image {
        border-radius: 4px;
      }

      .title {
        margin-left: 10px;
      }
    }

    .login-form-content {
      text-align: center;
      margin: 20px auto;
      margin-top: 15%;
      width: 80%;

      .input-item {
        margin: 20px auto;
        background-color: #f5f6f7;
        height: 45px;
        border-radius: 20px;

        .icon {
          font-size: 38rpx;
          margin-left: 10px;
          color: #999;
        }

        .input {
          width: 100%;
          font-size: 14px;
          line-height: 20px;
          text-align: left;
          padding-left: 15px;
        }

      }

      .login-btn {
        margin-top: 40px;
        height: 45px;
      }
      
      .reg {
        margin-top: 15px;
      }
      
      .xieyi {
        color: #333;
        margin-top: 20px;
      }
      
      .login-code {
        height: 38px;
        float: right;
      
        .login-code-img {
          height: 38px;
          position: absolute;
          margin-left: 10px;
          width: 200rpx;
        }
      }
    }
  }

</style>
